<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"PingFang SC","\5FAE\8F6F\96C5\9ED1","\5b8b\4f53",sans-serif,tahoma;
            color: #3C2314;
        }
        .main_body{
            width: 1162px;
            margin: 0 auto;
            letter-spacing: 1.5px;
            padding-top: 0;
        }
        div{
            display: block;
        }
        p{
            margin: 0;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        h2{
            font-size: 16px;
            font-weight: 700;
            padding-left: 0;
            color: #3C2314;
            float: left;
            margin: 0;
            display: block;
        }
        h3{
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            margin: 0;
            font-weight: 400;
        }
        b{
            float: left;
            height: 42px;
            line-height: 42px;
            width: 100px;
            text-align: left;
            margin-right: 10px;
            font-weight: 400;
        }
        input{
            font-size: 100%;
            outline: 0;
        }
        .d_input{
            height: 40px;
            line-height: 40px;
            border: 1px solid #E7E7E7;
            padding: 0 20px;
            float: left;
            width: 236px;
        }
        i{
            font-style: italic;
        }
        a{
            outline: 0;
            color: #3C2314;
            cursor: pointer;
            text-decoration: none;
        }
        .total{
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 0 65px 0 10px;
            text-decoration: none;
            overflow: hidden;
        }
        .d_ul{
            background-color: #fff;
            position: absolute;
            left: -1px;
            top: 40px;
            width: 100%;
            border: 1px solid #E7E7E7;
            z-index: 10;
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }
        li{
            display: list-item;
            text-align: -webkit-match-parent;
            list-style: none;
            padding: 0;
        }
        .d_ul li{
            cursor: pointer;
            margin: 0;
        }
        .pay{
            background: #fff;
            border: 1px solid #E7E7E7;
            padding: 13px 27px;
            line-height: 14px;
            float: left;
            text-align: center;
            cursor: pointer;
            margin-right: 28px;
        }
        img{
            border: 0;
        }
        div h3{
            font-size: 16px;
            margin-top: 10px;
            color: #3C2314;
        }
        .div_p{
            width: 560px;
            color: #AA8764;
        }
        label{
            cursor: default;
        }
        .chk {
            position: absolute;
            width: 24px;
            height: 24px;
            right: 3px;
            top: 28px;
            background: url(http://www.ebeecake.com/dist/images/chk1.png) no-repeat;
            background-size: 24px;
        }
        .span_i{
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            background: url(http://www.ebeecake.com/dist/images/ico_info.png) center top no-repeat;
            padding-left: 8px;
            font-style: normal;
        }
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div class="main_body">
                <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                    <h2>收货信息</h2>
                </div>
                <div style="margin: 10px 20px 0;clear: both;">
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>订货人</b>
                        <div style="float: left;display: inline;">
                            <input class="d_input" type="text" name="" maxlength="20">
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>订货人手机</b>
                        <div style="float: left;display: inline;">
                            <input class="d_input" type="text" name="" maxlength="11">
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>收货人</b>
                        <div style="float: left;display: inline;">
                            <input class="d_input" type="text" name="" maxlength="11">
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>收货人手机</b>
                        <div style="float: left;display: inline;">
                            <input class="d_input" type="text" name="" maxlength="11">
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>所在地区</b>
                        <div style="float: left;display: inline; margin-right: 40px">
                            <select style="width: 106px;height: 40px;border:1px solid #E7E7E7;color: #3C2314" name="city">
                                <option value="bj">北京</option>
                                <option value="sh" selected>上海</option>
                                <option value="gz">广州</option>
                            </select>
                        </div>
                        <div style="float: left;display: inline;margin-right: 40px">
                            <select style="width: 106px;height: 40px;border:1px solid #E7E7E7;color: #3C2314" name="city">
                                <option value="bj">北京市</option>
                                <option value="sh" selected>上海市</option>
                                <option value="gz">广州市</option>
                            </select>
                        </div>
                        <div style="float: left;display: inline;margin-right: 40px">
                            <select style="width: 106px;height: 40px;border:1px solid #E7E7E7;color: #3C2314" name="city">
                                <option value="bj">东城区</option>
                                <option value="sh" selected>徐汇区</option>
                                <option value="gz">白云区</option>
                            </select>
                        </div>
                        <div style="float: left;display: inline;">
                            <select style="width: 106px;height: 40px;border:1px solid #E7E7E7;color: #3C2314" name="city">
                                <option value="bj">三环内</option>
                                <option value="sh" selected>二环内</option>
                                <option value="gz">三环内</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b>收货地址</b>
                        <div style="float: left;display: inline;">
                            <input class="d_input" style="width: 630px" type="text" name="" maxlength="80">
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;overflow: hidden;">
                        <b></b>
                        <div style="float: left;display: inline;">
                            <a style="background-color: #3C2314;color: #FAF5DC;
                            padding: 13px 27px;line-height: 14px;float: left;
                            text-align: center;cursor: pointer;"href="">
                                保存地址</a>
                        </div>
                    </div>
                </div>
                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                <div style="margin-bottom: 14px;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;">
                        <h2>送货时间</h2>
                    </div>
                    <div style="margin: 10px 20px 0;clear: both;">
                        <input style="float: none;width: 236px;height: 40px;line-height: 40px;
                         border: 1px solid #E7E7E7;padding: 0 20px;" type="datetime-local">
                        <span style="margin-top: 8px;font-size: 12px;color: #AA8764;">
                            最佳送货时间段为每日8:30至23:30，特殊时间请电话联系便利店客服[4006-106-798]
                        </span>
                    </div>
                    <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                </div>
                <div style="margin-bottom: 14px;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                        <h2>支付方式</h2>
                    </div>
                    <div style="margin: 10px 20px 0;clear: both;overflow: hidden;">
                        <a class="pay" href="javascript:void (0)">微信支付</a>
                        <a class="pay" href="javascript:void (0)">支付宝支付</a>
                        <a class="pay" href="javascript:void (0)">货到现金</a>
                        <a class="pay" href="javascript:void (0)">货到POS</a>
                        <a class="pay" href="javascript:void (0)">建行龙支付</a>
                    </div>
                </div>
                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                <div style="margin-bottom: 14px;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                        <h2>送货清单</h2>
                    </div>
                    <div style="margin: 10px 20px 0;clear: both;overflow: hidden;">
                        <div>
                            <div style="padding: 0 0 10px;overflow: hidden;height: 98px;border-bottom: 1px solid #E7E7E7;
                                        position: relative;">
                                <div style="position: absolute;">
                                    <a href="">
                                        <div style="margin-right: 14px;float: left;">
                                            <img style="width: 98px;height: 98px;vertical-align: middle;" src="https://images.ebeecake.com/img_w/5662.jpg" alt="">
                                        </div>
                                        <div style="float: left;">
                                            <h3>芒果摩卡的春天|三拼蛋糕</h3>
                                            <p class="div_p">14厘米|适合2-4人食用|+4套餐具</p>
                                        </div>
                                    </a>
                                </div>
                                <div style="position: absolute;top: 43px;height: 20px;right: 252px;color: #3C2314;">
                                    <span>￥225/件</span>
                                </div>
                                <div style="position: absolute;top: 43px;right: 105px;">
                                    <span style="float: left;width: 36px;text-align: center;">x1</span>
                                </div>
                                <div style="position: absolute;top: 43px;right: 0px;">
                                    <span style="line-height: 20px;height: 20px;color: #AA8764;display: block;
                                    font-style:normal;font-weight: 400;">￥225</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom: 14px;overflow: hidden;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                        <h2>订单留言</h2>
                    </div>
                    <div style="margin:10px 20px 0;clear: both;">
                        <input style="height: 40px;line-height: 40px;border: 1px solid #E7E7E7;padding: 0 20px;
                        float: left;width: 630px;margin-right: 28px;" type="text" maxlength="100">
                    </div>
                </div>
                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                <div style="margin-bottom: 14px;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                        <h2>电子发票</h2>
                        <span style="font-size: 14px;float: right;margin-right: 28px;}">
                            <lable>
                                <input type="checkbox">
                                开具电子发票
                            </lable>
                        </span>
                    </div>
                    <div style="margin: 10px 20px 0;clear: both;">
                        <div>
                            <input style="height: 40px;line-height: 40px;border: 1px solid #E7E7E7;padding: 0 20px;
                            float: left;width: 236px;margin-right: 14px;display: inline;" type="text"
                                   placeholder="*发票票抬头" maxlength="100">
                            <input style="height: 40px;line-height: 40px;border: 1px solid #E7E7E7;padding: 0 20px;
                            float: left;margin-right: 14px;display: inline;" type="text"
                                   placeholder="*纳税人识别号" maxlength="100">
                            <input style="height: 40px;line-height: 40px;border: 1px solid #E7E7E7;padding: 0 20px;
                            float: left;margin-right: 28px;display: inline;" type="text"
                                   placeholder="*电子邮箱" maxlength="100">
                            <span style="color: #aaa;font-size: 12px;line-height: 42px;">注:发票会在收货后开具，请到电子邮箱接收</span>
                        </div>
                    </div>
                </div>
                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                <div style="margin-bottom: 14px;">
                    <div style="font-size: 16px;background: 0 0;height: 40px;line-height: 40px;color: #3C2314;">
                        <h2>使用优惠</h2>
                    </div>
                    <div style="cursor: pointer;position: relative;width: 100%;min-height: 90px;">
                        <div style="position: absolute;top: 0;right: 0;width: 380px;height: 88px;border: 1px solid #e7e7e7;
                            background-color: #fff;z-index: 3;cursor: pointer;overflow: hidden;">
                        <div style="float: left;border-right: 1px solid #e7e7e7;height: 100%;line-height: inherit;
                        padding: 20px 2px 0;font-size: 14px;font-weight: 700;background: 0 0;">
                            推荐<br>下单
                        </div>
                            <div style="margin-left: 42px;">
                                预存1000返100,存5000返900,首充再送50
                                <br>
                                还送价值200元超级会员资格
                                <br>
                                (享9折优惠,次年再送100元生日券)
                                <div style="font-weight: 700;">立省173,充值下单后余额:948</div>
                            </div>
                            <span class="chk"></span>
                        </div>
                    </div>
                </div>
                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                <div>
                    <div>
                        <div style="background: #F6F6F6;padding: 28px;overflow: hidden;">
                            <div>
                                <div style="line-height: 20px;height: 20px;position: relative;">
                                    <div style="position: absolute;right: 0;top: 0;text-align: right;">
                                        <div>
                                            <p style="float: left;">
                                                <span style="padding-right: 5px;">
                                                    <i style="font-style: normal;">1</i>件商品
                                                </span>
                                                |
                                                <span>总金额</span>
                                                <span><i style="font-style: normal;padding-left: 8px;min-width: 70px;display: inline-block;text-align: right;">
                                                ￥225
                                            </i></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div style="overflow: hidden;">
                                    <span style="float: right;line-height: 22px;height: 22px;padding: 1px 0;">
                                        <i class="span_i"></i>
                                        配送费
                                        <i style="font-style: normal;padding-left: 8px;min-width: 70px;display: inline-block;text-align: right;">
                                            +￥0
                                        </i>
                                    </span>
                                </div>
                                <div style="overflow: hidden;">
                                    <span style="    float: right;line-height: 22px;height: 22px;padding: 1px 0;">
                                        立减
                                        <i style="font-style: normal;padding-left: 8px;min-width: 70px;display: inline-block;text-align: right;">
                                            -￥0.00
                                        </i>
                                    </span>
                                </div>
                                <div style="overflow: hidden;margin-top: 28px;">
                                    <span style="float: right;line-height: 22px;height: 22px;padding: 1px 0;">
                                        实付
                                        <i style="font-style: normal;padding-left: 8px;min-width: 70px;display: inline-block;text-align: right;
                                            font-size: 24px;color: #AA8764;vertical-align: bottom;">
                                            ￥225
                                        </i>
                                    </span>
                                </div>
                                <div style="margin: 10px;border-bottom: 1px solid #E7E7E7;"></div>
                                <div>
                                    <div style="background: #F6F6F6;padding: 28px;overflow: hidden;">
                                        <div style="float: right;">
                                            <a href="javascript:void (0)" style="padding: 13px 28px;background: #3C2314;color: #FAF5DC;
                                                    line-height: 16px;text-align: center;">
                                                下单
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </el-main>
        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user:{username:"",}
            }
        },
        methods:{

        }
    })
</script>
</html>